<template>
  <div id="box">
    <div class="header_left iconfont">
      &#xe666;
    </div>
    <div class="header_input">
      <span class="iconfont font_input">&#xe643;</span><span>输入城市/景点/游玩主题</span>
    </div>
    <div class="header_right">
      <router-link to="/city">
        <span>{{city}}</span><span class="iconfont fontxia">&#xe61e;</span>
      </router-link>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState(['city'])
    },
    methods:{

    }

  }

</script>
<style scoped lang="stylus">
@import "~@/assets/css/stylus.styl"
  #box{
    position: fixed;
    top:0;
    left 0;
    z-index:1000;
    width:100%;
    background: $bgc;
    display:flex;
    height:.44rem;
    line-height: .3rem;
  }
  .header_left{
    line-height: .44rem;
    padding:0 .05rem;
    font-size: .26rem;
    color:#fff;
  }
  .header_right{
    font-size: .18rem;
    line-height: .44rem;
    color:#fff;
    padding:0 .08rem;
  }
  .header_input{
    width:100%;
    font-size: 0.16rem;
    background: #fff;
    border-radius: .08rem;
    line-height: .3rem;
    height:.3rem;
    margin-top: 0.07rem;
    color:#e4e7ea;
    flex:1;
    padding-left: .1rem;
  }
  .fontxia{
    font-size: .18rem;
    color:#fff;
  }

  .font_input{
    font-size: .20rem;
  }
  a{
    color:#fff;
  }
</style>
